
<template>
  <div class="play1 base-background-img">
    <ul class="ul-item-content">
      <li class="li-item-content" v-for='(item, index) in tabs' :key="index" :class="{'active': item.isSelected}" @click="swiper(item)">
        <img :src="item.img" alt="">
      </li>
    </ul>
    <c-pdf @closePdf="closePdf" v-if="isshowpdf" :info="info" :infourl="pdfurl"></c-pdf>
  </div>
</template>

<script>
  import STATICPATH from '../../config.js'
  export default {
    name: 'play3',
    data () {
      return {
        isshowpdf: false,
        ishsowvideo: false,
        info: '',
        infourl: '',
        tabs: [{
          img: 'static/hohoplay/3/1.png',
          url: 'static/hohoplay/pdf/3/1.pdf',
          data: [{
            isSelected: 1,
            name: '加入不倒翁原理 居家小物更便利',
            url: STATICPATH + '/hohoplay/video/3/K-L3-01/加入不倒翁原理 居家小物更便利!3.mp4'
          }, {
            isSelected: 0,
            name: '重心3',
            url: STATICPATH + '/hohoplay/video/3/K-L3-01/重心3.mp4'
          }]
        },
        {
          img: 'static/hohoplay/3/2.png',
          url: 'static/hohoplay/pdf/3/2.pdf',
          data: [{
            isSelected: 1,
            name: '小小机械手1',
            url: STATICPATH + '/hohoplay/video/3/K-L3-02/小小机械手1.mp4'
          }, {
            isSelected: 0,
            name: '小小机械手2',
            url: STATICPATH + '/hohoplay/video/3/K-L3-02/小小机械手2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/3/3.png',
          url: 'static/hohoplay/pdf/3/3.pdf',
          data: [{
            isSelected: 1,
            name: '有趣的镜子1',
            url: STATICPATH + '/hohoplay/video/3/K-L3-03/有趣的镜子1.mp4'
          }, {
            isSelected: 0,
            name: '有趣的镜子2',
            url: STATICPATH + '/hohoplay/video/3/K-L3-03/有趣的镜子2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/3/4.png',
          url: 'static/hohoplay/pdf/3/4.pdf',
          data: [{
            isSelected: 1,
            name: '潜望镜1',
            url: STATICPATH + '/hohoplay/video/3/K-L3-04/潜望镜1.mp4'
          }, {
            isSelected: 0,
            name: '潜望镜2',
            url: STATICPATH + '/hohoplay/video/3/K-L3-04/潜望镜2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/3/5.png',
          url: 'static/hohoplay/pdf/3/5.pdf',
          data: [{
            isSelected: 1,
            name: '投箭游戏1',
            url: STATICPATH + '/hohoplay/video/3/K-L3-05/投箭游戏1.mp4'
          }, {
            isSelected: 0,
            name: '投箭游戏2',
            url: STATICPATH + '/hohoplay/video/3/K-L3-05/投箭游戏2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/3/6.png',
          url: 'static/hohoplay/pdf/3/6.pdf',
          data: [{
            isSelected: 1,
            name: '滑梯1',
            url: STATICPATH + '/hohoplay/video/3/K-L3-06/滑梯1.mp4'
          }]
        },
        {
          img: 'static/hohoplay/3/7.png',
          url: 'static/hohoplay/pdf/3/7.pdf',
          data: [{
            isSelected: 1,
            name: '百变插球2',
            url: STATICPATH + '/hohoplay/video/3/K-L3-07/百变插球2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/3/8.png',
          url: 'static/hohoplay/pdf/3/8.pdf',
          data: [{
            isSelected: 1,
            name: '神奇水晶树1',
            url: STATICPATH + '/hohoplay/video/3/K-L3-08/神奇水晶树1.mp4'
          }]
        },
        {
          img: 'static/hohoplay/3/9.png',
          url: 'static/hohoplay/pdf/3/9.pdf',
          data: [{
            isSelected: 1,
            name: '气球火箭1',
            url: STATICPATH + '/hohoplay/video/3/K-L3-09/气球火箭1.mp4'
          }, {
            isSelected: 0,
            name: '气球火箭2',
            url: STATICPATH + '/hohoplay/video/3/K-L3-09/气球火箭2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/3/10.png',
          url: 'static/hohoplay/pdf/3/10.pdf',
          data: [{
            isSelected: 1,
            name: '磁力小车视1',
            url: STATICPATH + '/hohoplay/video/3/K-L3-10/磁力小车视1.mp4'
          }, {
            isSelected: 0,
            name: '磁力小车视2',
            url: STATICPATH + '/hohoplay/video/3/K-L3-10/磁力小车视2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/3/11.png',
          url: 'static/hohoplay/pdf/3/11.pdf',
          data: [{
            isSelected: 1,
            name: '人体骨骼模型2',
            url: STATICPATH + '/hohoplay/video/3/K-L3-11/02. 人体骨骼模型2.mp4'
          }, {
            isSelected: 0,
            name: '我的身体2',
            url: STATICPATH + '/hohoplay/video/3/K-L3-11/01. 我的身体2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/3/12.png',
          url: 'static/hohoplay/pdf/3/12.pdf',
          data: [{
            isSelected: 1,
            name: '啄木鸟1',
            url: STATICPATH + '/hohoplay/video/3/K-L3-12/啄木鸟1.mp4'
          }, {
            isSelected: 0,
            name: '啄木鸟2',
            url: STATICPATH + '/hohoplay/video/3/K-L3-12/啄木鸟2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/3/13.png',
          url: 'static/hohoplay/pdf/3/13.pdf',
          data: [{
            isSelected: 1,
            name: '蜡烛抽水机1',
            url: STATICPATH + '/hohoplay/video/3/K-L3-13/蜡烛抽水机1.mp4'
          }, {
            isSelected: 0,
            name: '蜡烛抽水机2',
            url: STATICPATH + '/hohoplay/video/3/K-L3-13/蜡烛抽水机2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/3/14.png',
          url: 'static/hohoplay/pdf/3/14.pdf',
          data: [{
            isSelected: 1,
            name: '悬浮球1',
            url: STATICPATH + '/hohoplay/video/3/K-L3-14/悬浮球1.mp4'
          }, {
            isSelected: 0,
            name: '悬浮球2',
            url: STATICPATH + '/hohoplay/video/3/K-L3-14/悬浮球2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/3/15.png',
          url: 'static/hohoplay/pdf/3/15.pdf',
          data: [{
            isSelected: 1,
            name: '有趣传声筒缺视频剪辑1',
            url: STATICPATH + '/hohoplay/video/3/K-L3-15/有趣传声筒缺视频剪辑1.mp4'
          }, {
            isSelected: 0,
            name: '有趣传声筒缺视频剪辑2',
            url: STATICPATH + '/hohoplay/video/3/K-L3-15/有趣传声筒缺视频剪辑2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/3/16.png',
          url: 'static/hohoplay/pdf/3/16.pdf',
          data: [{
            isSelected: 1,
            name: '灯泡亮起来',
            url: STATICPATH + '/hohoplay/video/3/K-L3-16/01.灯泡亮起来.mp4'
          }, {
            isSelected: 0,
            name: '馬鈴薯電池',
            url: STATICPATH + '/hohoplay/video/3/K-L3-16/02.馬鈴薯電池.mp4'
          }]
        }]
      }
    },
    methods: {
      swiper: function (item) {
        console.log(item)
        this.info = item.data
        this.pdfurl = item.url
        this.isshowpdf = true
      },
      closePdf: function () {
        this.isshowpdf = false
      }
    }
  }
</script>

<style scoped>
.play1 > div {
  position: absolute; 
}
.ul-item-content {
  margin: 0;
  padding: 0;
  list-style-type: none;
  top: 230px;
  left: 190px;
  width: 910px;
  height: 35px;
  position: absolute;
}
.li-item-content {
  cursor: pointer;
  float: left;
  margin: 15px 9px;
  position: initial;
  z-index: 10;
}
</style>
